<template>
    <view>
        <u-loading-page :loading="loading"></u-loading-page>
        <view class="certificate-container" v-if="!loading">
            <view class="certificate-header">
                <text class="certificate-title-text">{{title}}</text>
                <view class="certificate-title">
                  <image v-if="picUrl" :src="picUrl"
                  @click="handleLoad"
                   style="width: 100%;height:700px;" mode="widthFix" />
                   <view v-else>
                    <text class="certificate-title-text">{{pciText}}</text>
                   </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getCertificate } from '@/api'
export default {
  
    data() {
        return {
            certificate: {},
            title:"",
            picUrl:"",
            pciText:"正在生成...",
            loading:true,
            queryTimer: null, // 定时器
            queryCount: 0, // 查询次数
            maxQueryCount: 100 // 最大查询次数
           
        }
    },
    onLoad(options) {
       this.init(options)
    },
    onUnload() {
        // 页面卸载时清除定时器
        this.clearTimer()
    },
    methods: {
        handleLoad(){
            uni.previewImage({
                urls: [this.picUrl]
            })
        },
        init(options) {
           this.loading=true
            this.title=options.title
            this.queryCount = 0
            this.queryCertificate(options)
        },
        
        // 查询存证
        queryCertificate(options) {
            this.queryCount++
            console.log(`第${this.queryCount}次查询存证...`)
            
            getCertificate({
                communityId: options.communityId,
                recordId: options.recordId
            }).then(res => {
              
                this.loading = false
                if(res.code == "200" && res.data && res.data.picUrl) {
                    // 查询到存证图片，停止查询
                    
                    this.picUrl = res.data.picUrl
                    this.clearTimer()
                } else {
                    // 没有查询到存证图片
                    if (this.queryCount >= this.maxQueryCount) {
                        // 达到最大查询次数，停止查询
                       
                        this.pciText = "存证生成超时，请稍后重试"
                        this.clearTimer()
                        console.log('存证查询超时，停止定时查询')
                    } else {
                        // 继续定时查询
                        this.pciText = `存证正在生成中，请稍等片刻...`
                        this.startTimer(options)
                    }
                }
            }).catch(error => {
                console.error('查询存证失败:', error)
                if (this.queryCount >= this.maxQueryCount) {
                    this.loading = false
                    this.pciText = "存证查询失败，请稍后重试"
                    this.clearTimer()
                } else {
                    this.pciText = `存证查询失败，正在重试...(${this.queryCount}/${this.maxQueryCount})`
                    this.startTimer(options)
                }
            })
        },
        
        // 开始定时器
        startTimer(options) {
            this.clearTimer() // 先清除之前的定时器
            this.queryTimer = setTimeout(() => {
                this.queryCertificate(options)
            }, 3000) // 3秒后再次查询
        },
        
        // 清除定时器
        clearTimer() {
            if (this.queryTimer) {
                clearTimeout(this.queryTimer)
                this.queryTimer = null
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.certificate-container{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    position: relative;
    top: 1px;
}
.certificate-header{
    padding: 20rpx 20rpx;
    background: #fff;
}
.certificate-title-text{
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-top: 20rpx;
    padding: 20rpx 20rpx;
}
</style>